// type markPropsType = {
//     title?: string,
//     marginLeft?: string,
//     background?: string,
//     border?: string,
//     color?: string,
//     fontSize?: string,
//     lineHeight?: string,
//     marginRight?: string,
//     onClick?: Function,
//     cursor?:string
// };

const Mark = ({title, background, border, color, marginLeft, fontSize, lineHeight, marginRight,onClick,cursor}) => (
    <span onClick={onClick}>
        {title}
        <style jsx>{`
            span{
                display: inline-block;
                width: auto;
                line-height: ${lineHeight || '22px'};
                text-align:center;
                border-radius: 3rem;
                background:#ccc;
                padding: 0 11px;
                background:${background || 'transparent'};
                color: ${color || '#fff'};
                border: ${border || 'none'};
                font-size: ${fontSize || '12px'};
                margin-left:${marginLeft || '0'};
                margin-right: ${marginRight || '1rem'};
                cursor: ${cursor || 'auto'};
            }
        `}</style>
    </span>
);

export default Mark